<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu :active-name="activeName"
          :open-names="openNames"
          :theme="theme"
          :accordion="accordion"
          width="auto"
          @on-select="handleSelect"
          ref="menu"
          v-show="!collapsed">
      <template v-for="item in menuList">
        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
        <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">
          <Icon :type="item.icon"/>
          <span>{{ showTitle(item) }}</span>
        </menu-item>
      </template>
    </Menu>
    <div class="menu-collapsed" v-show="collapsed" :list="menuList">
      <collapsed-menu @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" v-for="item in menuList" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
    </div>
  </div>
</template>
<script>
import sideMenuItem from 'views/home/components/side-menu/components/side-menu-item/side-menu-item'
import collapsedMenu from 'views/home/components/side-menu/components/collapsed-menu/collapsed-menu'
import mixin from './mixin'
export default {
  name: 'sideMenu',
  mixins: [ mixin ],
  components: {
    sideMenuItem,
    collapsedMenu
  },
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: 'dark'
    },
    rootIconSize: {
      type: Number,
      default: 20
    },
    iconSize: {
      type: Number,
      default: 16
    },
    accordion: Boolean,
    activeName: {
      type: String,
      default: ''
    },
    openNames: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleSelect (name) {
      this.$emit('on-select', name)
    }
  }
}
</script>
<style lang="stylus" scoped>
.side-menu-wrapper
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  .menu-collapsed
    padding-top: 10px
    a.drop-menu-a
      display: inline-block
      padding: 6px 15px
      text-align: center
      width: 100%
      color: #495060
    .ivu-dropdown
      width: 100%
      .ivu-dropdown-rel button
        width: 100%
    .menu-title
      margin-left: 6px
    .ivu-select-dropdown
      width: 160px
      margin-left: 4px
</style>
